<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../sakura.css" />
    <title>WebUSB mbed DFU</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="mbed-compile-api.js"></script>
    <script src="../dfu-util/dfu.js"></script>
    <script src="../dfu-util/FileSaver.js"></script>
    <script src="mbed-download.js"></script>
    <style>
      p.warning {
        color: red;
      }
      p.error {
        color: red;
        font-weight: bold;
      }
      div.buildLog {
        min-height: 3em;
        max-height: 100em;
        overflow: scroll;
        font-family: monospace;
      }
      label.rightAligned {
        display: inline-block;
        width: 20ex;
        text-align: right;
      }
      label.leftAligned {
        display: inline-block;
        width: 16ex;
        text-align: left;
      }
      input:invalid {
        color:red;
      }
    </style>
  </head>
  <body>
    <a href="https://github.com/devanlai/webdfu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
    <fieldset>
      <legend>mbed</legend>
      <form>
        <p>
          Login with your developer.mbed.org credentials. The <a href="https://developer.mbed.org/handbook/Compile-API">mbed remote compile API</a> only supports HTTP(S) basic auth...
        </p>
        <p>
          <label for="username" class="rightAligned">mbed Username: </label>
          <input type="text" name="username" id="username"></input>
        </p>
        <p>
          <label for="password" class="rightAligned">Password: </label>
          <input type="password" name="password" id="password"></input>
          <button type="button" id="authenticate">Set Credentials</button>
        </p>
      </form>
      <fieldset>
        <legend>Remote Compiler API</legend>
        <p>
          Provide either the name of a program in your online <a href="https://developer.mbed.org/compiler/">mbed compiler workspace</a> or a fully qualified URL to a published repository on <a href="https://developer.mbed.org/code/">developer.mbed.org</a>
        </p>
        <form id="buildForm">
          <p>
            <input type="radio" name="buildType" value="program" checked="true">
            <label for="programName" class="leftAligned">Program name: </label>
            <input type="text" name="programName" id="programName" value="mbed_blinky" size="60"/>
          </input>
          </p>
          <p>
            <input type="radio" name="buildType" value="repo">
            <label for="repoURL" class="leftAligned">Repository URL: </label>
            <input type="url" name="repoURL" id="repoURL" value="https://developer.mbed.org/users/devanlai/code/STM32F103C8T6_WebUSBDFU/" size="60"/>
          </input>
          </p>
          <p>
            <label for="targetPlatform">Target Platform: </label>
            <input type="text" list="platforms" name="targetPlatform" id="targetPlatform" value="ST-Nucleo-F103RB"/>
            <datalist id="platforms">
              <option value="ST-Nucleo-F103RB">STMicro NUCLEO-F103RB</option>
              <option value="ST-Nucleo-F303K8">STMicro NUCLEO-F303K8</option>
              <option value="Seeed-Arch-Max">Seeed Arch Max</option>
              <option value="FRDM-KL05Z">Kinetis FRDM-KL05Z</option>
              <option value="KL25Z">Kinetis FRDM-KL25Z</option>
            </datalist>
          </p>
          <p>
            <button type="button" name="build" id="build" disabled>Build</button>
            <button type="button" name="save" id="save" disabled>Save</button>
            <button type="button" name="buildAndProgram" id="buildAndProgram" disabled>Build and Program</button>
          </p>
        </form>
      </fieldset>
      <fieldset>
        <legend>Build Output</legend>
        <div id="mbedLog" class="buildLog"></div>
      </fieldset>
    </fieldset>
    <fieldset>
      <legend>WebUSB</legend>
      <p>Enter the USB Vendor ID to filter connected WebUSB devices.
        <ul>
          <li>Boards with a <a href="https://github.com/devanlai/DAPLink/tree/nucleo_webusb">DAPLink</a> debug interface have a vendor ID of 0x0D28</li>
          <li>Boards with the <a href="https://github.com/devanlai/dapboot/tree/highboot">dapboot</a> bootloader have a vendor ID of 0x1209 in DFU mode</li>
        </ul>
      </p>
      <p>
        <label for="vid">Vendor ID (hex):</label>
        <input list="vendor_ids" type="text" name="vid" id="vid" value="0x1209" maxlength="6" size="8" pattern="0x[A-Fa-f0-9]{1,4}"/>
        <datalist id="vendor_ids">
          <option value="0x1209">dapboot DFU bootloader</option>
          <option value="0x0D28">mbed DAPLink</option>
        </datalist>
      </p>
      <p>
        <span id="status"></span>
      </p>
      <p>
        <button id="connect">Connect</button>
      </p>
      <p>
        <div id="usbInfo" style="white-space: pre"></div>
        <div id="dfuInfo" style="white-space: pre"></div>
      </p>
      <fieldset>
        <legend>Runtime mode</legend>
        <p>
          If the device has a <a href="http://www.usb.org/developers/docs/devclass_docs/DFU_1.1.pdf">USB DFU</a> bootloader installed, use the detach button to switch from runtime mode to DFU mode.
        </p>
        <button id="detach" disabled="true">Detach DFU</button>
      </fieldset>
      <fieldset>
        <label for="transferSize">Transfer Size:</label>
        <input type="number" name="transferSize" id="transferSize" value="1024"/>
        <legend>DFU mode</legend>
        <fieldset>
          <legend>Firmware Download (write to USB device)</legend>
          <p>
            <button id="download" disabled="true">Download</button>
            <span id="binaryInfo"></span>
          </p>
          <div class="log" id="downloadLog"></div>
        </fieldset>
      </fieldset>
    </fieldset>
    <h1>About</h1>
    <p>
      This is a proof of concept using <a href="https://wicg.github.io/webusb/">WebUSB</a> and the <a href="https://developer.mbed.org/handbook/Compile-API">mbed remote compilation API</a> to build and flash mbed binaries to microcontrollers from entirely within the browser. Unlike <a href="https://create.arduino.cc/">Arduino Create</a> and <a href="https://codebender.cc/">Codebender</a>, this demo does not require the installation of a binary proxy-agent or browser plugin.
    </p>
    <h1>Prerequisites</h1>
    <p>In order to run this demo, you will need:</p>
    <ul>
      <li>
        An up-to-date version of Chrome, at least version 61 or newer
      </li>
      <li>
        An <a href="https://developer.mbed.org/">mbed.org</a> account.
      </li>
      <li>
        A USB DFU class device with WebUSB support
        <ul>
          <li>
            <a href="http://www.st.com/en/evaluation-tools/nucleo-f103rb.html">Nucleo F103RB development boards</a> can be flashed with a <a href="https://github.com/devanlai/DAPLink/tree/nucleo_webusb">modified version</a> of the <a href="https://developer.mbed.org/handbook/DAPLink">mbed DAPLink firmware</a> with WebUSB support.
          </li>
        </ul>
      </li>
    </ul>
    <h1>Limitations</h1>
    <ul>
      <li>
        mbed login credentials must be supplied every time the page is loaded - the remote compile API only offers basic HTTP(S) auth
      </li>
      <li>
        The DAPLink firmware with WebUSB support only works under Linux and macOS - Windows requires additional work to load a generic driver for the DFU interface.
      </li>
      <li>
        The Nucleo F103RB development board is the only supported mbed board at this time.
      </li>
    </ul>
  </body>
</html>
